<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;" >
      出题信息
    </div>
    <div class="row">
      <q-btn color="primary" @click="add()" label="新增" class="q-ma-md"/>
    </div>
    <q-table
      v-if="projects"
      style="max-height: 500px;overflow:  hidden;overflow-y: auto"
      class="q-ma-sm tw-border"
      flat
      :rows="projects"
      :columns="columns"
      row-key="pid"
      v-model:selected="selected"
      selection="single"
      @row-click="(evt,row,index) => {rowClick(row)}"
    >
      <template v-slot:body-cell-pdesc="props">
        <q-td :props="props">
          <div>
            {{ props.value.substring(0, 20) }}...
            <q-tooltip max-width="400px">
              <q-td>{{ props.value }}</q-td>
            </q-tooltip>
          </div>
          <div class="tw-underline">
            {{ props.row.details }}
          </div>
        </q-td>
      </template>
    </q-table>
    <div class="row">
      <q-btn v-if="selected.length" label="删除" class="q-ma-md" color="primary" @click="remove()"/>
    </div>
  </div>
</template>

<script setup>


import {api} from "boot/axios";
import {ref} from "vue";
import {date,useQuasar} from 'quasar'
import ProjectConfig from "components/ProjectConfig.vue";

let projects = ref([])
let selected = ref([])
let $q = useQuasar()
let rowClick =  (row)=>{
  console.log(row);
  $q.dialog(
    {
      component: ProjectConfig,
      componentProps:{
        project:row
      },
      title:'课题详情',
      ok: '确定',
      cancel: '取消',
      html: true,
      persistent: true
    }
  )
}
let info = JSON.parse(localStorage.getItem('info'))
api({
  url: '/job/teacher/getproject?' + new URLSearchParams({tnum: info.tnum}),
  method: 'get'
}).then(res => {
  let data = res.data.data
  projects.value = data.map(item => {
    return {
      pid: item.pid,
      pname: item.pname,
      pdesc: item.pdesc,
      status: item.status,
      created_time: date.formatDate(item.createdTime, 'YYYY-MM-DD HH:mm:ss'),
      updated_time: date.formatDate(item.updatedTime, 'YYYY-MM-DD HH:mm:ss'),
      snum: item.snum,
      sname: item.sname
    }
  })
})
let remove = ()=>{
  let pid = selected.value[0].pid
  api({
    url: '/job/project/delete?'+new URLSearchParams({pid:pid}),
    method: 'GET',
  }).then(res => {
    let data = res.data.data
    projects.value = projects.value.filter(item => item.pid !== pid)
    selected.value = []
  })
}
let add = ()=>{
  $q.dialog(
    {
      component: ProjectConfig,
      componentProps:{
        project:{'pname':'','pdesc':'','tnum':info.tnum,'dept':info.dept}
      },
      title:'新增课题',
      ok: '确定',
      cancel: '取消',
      html: true,
      persistent: true
    }
  )
}
const columns = [
  {
    name: 'pname',
    label: "课题名称",
    field: row => row.pname,
  },
  {
    name: 'pdesc',
    label: "课题描述",
    field: row => row.pdesc,
  },
  {
    name:'snum',
    label: '学生学号',
    field: row => row.snum
  },
  {
    name: 'sname',
    label: '学生姓名',
    field: row => row.sname
  },
  {
    name: 'status',
    label: '状态',
    field: row => row.status,
    sortable: true,
  },
  {
    name: 'created_time',
    label: "创建时间",
    field: row => row.created_time
  },
  {
    name: 'updated_time',
    label: "更新时间",
    field: row => row.updated_time
  }
]
</script>

<style scoped>


</style>
